import 'package:flutter/material.dart';

class AppBarHomePage extends StatefulWidget {
  @override
  _AppBarHomePageState createState() => _AppBarHomePageState();
}

class _AppBarHomePageState extends State<AppBarHomePage>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = new TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 4, // tabbar 的长度
        child: Scaffold(
          appBar: AppBar(
            title: Text('appbar'),
            // 左侧按钮区域
            leading: Builder(
              builder: (BuildContext ctx) {
                return IconButton(
                    icon: Icon(Icons.home),
                    onPressed: () {
                      Scaffold.of(ctx).openDrawer();
                    });
              },
            ),
            // 右侧按钮区域
            actions: <Widget>[
              Icon(Icons.message),
              Icon(Icons.share),
              Icon(Icons.close)
            ],
            // 标题下显示一个tab导航栏
            // bottom: new PreferredSize(
            //   child: TabPageSelector(
            //     controller: tabController,
            //     color: Colors.yellow,
            //     selectedColor: Colors.red,
            //     // 小圆点的大小
            //     indicatorSize: 14.0,
            //   ),
            //   // 用来配置bottom的区域高度 如果不配置bottom会占用顶部的appbar区域将其往上顶上去
            //   preferredSize: const Size.fromHeight(28.0),
            // )
            bottom: TabBar(
              tabs: <Widget>[
                Tab(text: '标签一'),
                Tab(text: '标签二'),
                Tab(text: '标签三'),
                Tab(text: '标签四'),
              ],
              controller: tabController,
              // 标签是否可滑动
              isScrollable: false,
              // 滑动条的颜色
              indicatorColor: Colors.red,
              // 滑动条的高度度
              indicatorWeight: 2.0,
              // 滑动条内边距
              indicatorPadding: EdgeInsets.all(1.0),
              // 滑动条的宽度 label 标签的宽度 tab 默认 平均分配
              indicatorSize: TabBarIndicatorSize.label,
              // indicatorSize: TabBarIndicatorSize.tab,
              labelColor: Colors.red,
              labelStyle: TextStyle(fontSize: 18.0),
              unselectedLabelColor: Colors.yellow,
              unselectedLabelStyle: TextStyle(fontSize: 15.0),
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              Center(child: Text('用来配置tabber 1')),
              Center(child: Text('用来配置tabber 2')),
              Center(child: Text('用来配置tabber 3')),
              Center(child: Text('用来配置tabber 4')),
            ],
            controller: tabController,
          ),
          // Center(child: Text('appbar')),
          drawer: Container(
            color: Colors.yellow,
            width: 250,
            child: Text('我是drawer'),
          ),
        ));
  }
}
